<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="反馈评价"></xk-header>
		<view class="list">
			<view class="list-item">
				<view class="name">反馈单号</view>
				<view>{{data.apply_no}}</view>
			</view>
			<view class="list-item">
				<view class="name">反馈类型</view>
				<view>{{types[data.fb_type]}}</view>
			</view>
			<view class="list-item">
				<view class="name">反馈人</view>
				<view>{{data.apply_user}}</view>
			</view>
			<view class="list-item">
				<view class="name">反馈部门</view>
				<view>{{data.apply_company_name}}</view>
			</view>
			<view class="list-item upload-img-item">
				<view>问题描述：</view>
				<view class="desc" >
					{{data.fb_desc}}
				</view>
				<image-list v-if="data.fb_pic" :pics="data.fb_pic"></image-list>
			</view>
			<view class="list-item">
				<view class="name">备注：</view>
				<view>{{data.apply_remark || "无"}}</view>
			</view>
		</view>

		<view class="data-item">
			<!--  -->
			<view class="title">现场反馈处理进度</view>
			<view class="info">
				<view class="name">接单人：</view>
				<view class="desc">{{data.deal_user}}</view>
			</view>
			<view class="info">
				<view class="name">处理时间：</view>
				<view class="desc">{{data.deal_time}}</view>
			</view>
			<view class="info">
				<view class="name">处理状态：</view>
				<view class="desc status">已完成</view>
			</view>
			<view class="info" >
				<view class="name">处理结果：</view>
				<view class="desc">
					<view>已完成</view>
					<image-list v-if="data.deal_pic" :pics="data.deal_pic"></image-list>
					<!-- <view class="add-img-view" v-if="data.deal_pics.length > 0">
						<view v-for="item of data.deal_pics"  class="add-img-view-item">
							<image mode="aspectFill" :src="item"/>
						</view>
					</view> -->
				</view>

			</view>
		</view>

		<view class="data-item">
			<!--  -->
			<view class="title">对服务进行评价</view>

			<radio-group @change="radioChange">
				<view class="info radio">
					<radio v-for="(item, index) of radios" :key="index" :value="item.data_value" :checked="index === radioIndex"
					color="#007AFF" style="transform:scale(0.8)">{{item.data_text}}</radio>
				</view>
			</radio-group>

			<view class="info">
				<view class="evaluate-desc">
					<textarea type="text" v-model="evaluateContent" placeholder="请输入您对本次反馈服务的评价" placeholder-style="color:#ccc"/>
				</view>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="onSubmit()">提交评价</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				eventName: "",
				data: {},
				radioIndex: -1,
				radios:[],
				types: {},
				evaluateContent: ""
			};
		},
		onLoad(options){
			if (options && options.eventName) {
				this.eventName = options.eventName
			}

			if (options && options.data) {
				this.data = JSON.parse(options.data)
				console.warn("反馈信息：", this.data)
			}

			this.initInfo()
		},
		methods:{
			initInfo() {
				this.$api.baseData_getToolDataList("PM_FEEDBACK_FBTYPE").then(res => {
					console.warn("反馈类型：", res)
					for (let item of res) {
						this.types[item.data_value] = item.data_text;
					}
				})
				this.$api.baseData_getToolDataList("PM_FEEDBACK_EVALUATE_RESULT").then(res => {
					console.warn("评价类型：", res)
					this.radios = res
				})
			},
			radioChange(evt) {
				for (let i = 0; i < this.radios.length; i++) {
					if (this.radios[i].data_value === evt.detail.value) {
						this.radioIndex = i;
						break;
					}
				}
			},
			goDetail() {
				uni.navigateTo({
					url: "/pagesC/report-repair/report-repair-sp-detail"
				})
			},
			onSubmit() {
				if (this.radioIndex == -1) {
					this.$util.toast("请选择评价")
					return
				}
				
				if (this.radioIndex == 2 && !this.evaluateContent) {
					this.$util.toast("请输入您对本次反馈服务的评价")
					return
				}
				this.$util.confirm({
					content: "确认要提交评价信息？",
					confirmText: "提交",
				}).then((isConfirm)=>{
					if (isConfirm) {
						this.$util.post({
							url: "app/pmFeedback/evaluate",
							data: {
								pm_feedback_id: this.data.pm_feedback_id,
								evaluate_result: this.radios[this.radioIndex].data_value,
								evaluate_content: this.evaluateContent
							}
						}).then(res => {
							this.$util.toast("提交成功")
							
							this.data.evaluate_result = this.radios[this.radioIndex].data_value
							this.data.evaluate_content = this.evaluateContent
							if (this.eventName) {
								this.$EventBus.$emit(this.eventName, this.data);
							}
							
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.content-title{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding: 32rpx 0rpx;
		.title-icon{
			width: 12rpx;
			height: 40rpx;
			background-color: #2C72FF;
			border-top-right-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
			margin-right: 10rpx;
		}
	}
	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;

		color: #333;
		font-size: 28rpx;
		padding: 35rpx 20rpx;

		.name {
			width: 150rpx;
		}

		.title1 {
			color: #333;
			margin-left: 20rpx;
		}

		.right-title1{
			flex: 1;
			text-align: right;
			color: #333;
		}
		.desc {
			margin-top: 10rpx;
			color: #666;
			font-size: 28rpx;
		}
	}

	.desc-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		:last-child {
			margin-top: 20rpx;
			padding: 5rpx;
			width: 100%;
			height: 120rpx;
			background-color: #F9F9F9;

			>textarea {
				margin: 0rpx;
			}
		}
	}
	.upload-img-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

	}
	.item-border {
		border-bottom: 1rpx #F8F8F8 solid;
	}
}

.add-img-view {
	display: flex;
	align-items: center;
	flex-direction: row;
	background-color: #FFFFFF !important;
	color: #999;
	font-size: 24rpx;
	margin-top: 20rpx;

	.add-img-view-item {
		margin-right: 5rpx;
		:first-child {
			width: 120rpx;
			height: 120rpx;
		}
	}
}

.data-item{
	display: flex;
	flex: 1;
	margin: 20rpx 30rpx;
	border-radius: 10rpx;
	padding: 20rpx;
	background-color: #ffffff;
	flex-direction: column;

	.title{
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.info{
		display: flex;
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;

		.name {
			color: #999;
			width: 150rpx;
		}

		.desc {
			flex: 1;
		}

		.detail {
			color: #2C72FF;
			font-size: 32rpx;
		}

		.desc-img {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;
			>image {
				width: 120rpx;
				height: 120rpx;
				margin: 0rpx 5rpx 5rpx 0rpx;
			}
		}

		.status {
			color: #2C72FF;
		}

		.evaluate-desc {
			display: flex;
			margin-top: 10rpx;
			background-color: #F8F8F8;
			padding: 20rpx;
			height: 175rpx;
			width: 100%;

			>textarea {
				width: 100%;
				height: 100%;
			}
		}
	}
	.radio {
		justify-content: space-between;
	}
}

</style>
